<template lang="">
  <div>
    <el-card class="box-card">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="头像">
          <img v-if="!progressFlag" class="head-img" :src="ruleForm.head_img"
            style="border-radius: 50%; width: 100px;height: 100px;" />
          <div v-show="progressFlag" class="head-img">
            <el-progress type="circle" :percentage="progressPercent"></el-progress>
          </div>
          <el-upload class="img-btn" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload"
            :http-request="uploadImg">
            <el-button type="success" plain round size="mini">更改头像</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名" style="width: 650px;">
          <el-input v-model="ruleForm.nickname" disabled></el-input>
        </el-form-item>

        <el-form-item style="width: 650px;">
          <el-button type="primary" icon="el-icon-switch-button" @click='onSubmit'>退出登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {},
                progressPercent: 0,
                progressFlag: false,
            }
        },
        methods: {
            //获取信息
            getinfo() {
                this.$axios.get('/info').then(res => {
                    console.log(res.data);
                    this.ruleForm = res.data.data
                })
            },
            //个人信息头像
            uploadImg(f) {
                this.progressFlag = true
                let formdata = new FormData()
                formdata.append('picFile', f.file)

                this.$axios({
                    url: '/uploader',
                    method: 'post',
                    data: formdata,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    onUploadProgress: progressEvent => {
                        // progressEvent.loaded:已上传文件大小
                        // progressEvent.total:被上传文件的总大小
                        this.progressPercent = (progressEvent.loaded / progressEvent.total * 100)
                    }
                }).then(res => {
                    console.log(res.data.message);
                    if (res.data.message == 'ok') {
                        this.ruleForm.head_img = res.data.file
                        if (this.progressPercent === 100) {
                            this.progressFlag = false
                            this.progressPercent = 0
                        }
                        this.$message({
                            type: 'success',
                            message: '修改头像成功'
                        });
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).then(error => {
                    console.log(error)
                })
            },

            // 上传图片前的过滤
            beforeAvatarUpload(file) {
                const isLt5M = (file.size / 1024 / 1024) < 5
                if (!isLt5M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!')
                }
                return isLt5M
            },
            //退出登录
            onSubmit() {
                // 清除sessionStorage
                sessionStorage.clear();
                this.$router.push({
                    path: '/'
                })
                location.reload();
            }
        },
        mounted() {
            this.getinfo()
        },
    }
</script>
<style lang="less">
    .up-img-cover {
        width: 100px;
        height: 100px;
    }
    
    .up-img-cover img {
        width: 100%;
    }
    
    .up-img-txt label {
        font-weight: 100;
        margin-top: 50px;
    }
</style>